import knowledges from "./data.js";
// 每一页知识点生成标签
const pageList = document.querySelector('#page-list');
const len = knowledges.length
for (let i = 0; i < len; i++) {
  const item = knowledges[i];
  const content = document.createElement('div')
  content.className = 'scroll_box'
  item.content.map((point, pointIndex) => {
    const child = document.createElement('p');
    child.innerText = `${pointIndex + 1}. ${point}`;
    content.appendChild(child);
  })
  const template = document.createElement('div')
  template.className = 'page hide';
  template.classList.add(`page${i + 1}`);
  if (i === 0) {
    template.classList.remove('hide');
  }
  template.innerHTML = `
  <div class="page_body">
    <div class="page_title">${item.title}</div>
  </div>
  `
  template.querySelector('.page_body').appendChild(content)
  pageList.appendChild(template);
}

// element 作用区域（所有执行翻页页面的父级元素DOM）
// isLoop 是否循环执行翻页
// needScrollClass 执行翻页页面内部可滚动元素样式名
function setChangePage (element, isLoop, needScrollClass) {
  const pageData = {
    curPage: 1,
    prevPage: null,
    PageL: element.querySelectorAll('.page').length,
    type: null,
    canTouch: true,
    startY: 0,
    endY: 0,
    diff: 0,
  }
  element.addEventListener("touchstart", touchStart, false);
  element.addEventListener("touchmove", touchMove, false);
  element.addEventListener("touchend", touchEnd, false);
  function touchStart (e) {
    pageData.startY = e.touches[0].pageY;
    pageData.endY = '';
    pageData.diff = '';
  }
  function touchMove (e) {
    e.preventDefault();
    pageData.endY = e.touches[0].pageY;
    pageData.diff = pageData.endY - pageData.startY;
  }
  function touchEnd (e) {
    if (Math.abs(pageData.diff) > 150 && pageData.canTouch) {
      changeDoBefore(pageData.diff);
    }
    // setTimeout(function(){
    pageData.startY = '';
    pageData.endY = '';
    pageData.diff = '';
    // },500);
  }
  function changeDoBefore (diffNum) {
    if (diffNum > 0) {
      // 向下滑动进入前一页
      pageData.type = 2;
      if (pageData.curPage <= 1) {
        if (isLoop) {
          pageData.prevPage = 1;
          pageData.curPage = pageData.PageL;
          changeDo();
        }
      } else {
        pageData.prevPage = pageData.curPage;
        pageData.curPage--;
        changeDo();
      }
    } else {
      // 向上滑动进入下一页
      pageData.type = 1;
      if (pageData.curPage >= pageData.PageL) {
        if (isLoop) {
          pageData.prevPage = pageData.PageL;
          pageData.curPage = 1;
          changeDo();
        }
      } else {
        pageData.prevPage = pageData.curPage;
        pageData.curPage++;
        changeDo();
      }
    }
  }
  function changeDo () {
    if (pageData.type == 1) {
      if (pageData.prevPage === 0) {
        pageData.prevPage = 1
      }
      element.querySelector('.page' + pageData.prevPage).classList.remove('inTop', 'outTop', 'inDown', 'outDown', 'hide');
      element.querySelector('.page' + pageData.prevPage).classList.add('outTop');
      element.querySelector('.page' + pageData.curPage).classList.remove('inTop', 'outTop', 'inDown', 'outDown', 'hide');
      element.querySelector('.page' + pageData.curPage).classList.add('inTop');
    } else if (pageData.type == 2) {
      element.querySelector('.page' + pageData.prevPage).classList.remove('inTop', 'outTop', 'inDown', 'outDown', 'hide');
      element.querySelector('.page' + pageData.prevPage).classList.add('outDown');
      element.querySelector('.page' + pageData.curPage).classList.remove('inTop', 'outTop', 'inDown', 'outDown', 'hide');
      element.querySelector('.page' + pageData.curPage).classList.add('inDown');
    }

    if (needScrollClass) {
      scrollEleData.canTouch = false;
      setTimeout(function () {
        scrollEleData.canTouch = true;
      }, 500);
    }

    pageData.canTouch = false;
    setTimeout(function () {
      pageData.canTouch = true;
      element.querySelector('.page' + pageData.prevPage).classList.add('hide');
    }, 500);
    // 不循环切换时设置最后一页时隐藏向上箭头
    if (pageData.curPage >= pageData.PageL) {
      if (!isLoop) {
        element.querySelector('.arrow').classList.add('hide');
      }
    } else {
      if (!isLoop) {
        element.querySelector('.arrow').classList.remove('hide');
      }
    }
    // 执行翻页页面内部可滚动时，设置进入页面后滚动条位置
    if (needScrollClass && element.querySelector('.page' + pageData.curPage).querySelector('.' + needScrollClass)) {
      element.querySelector('.page' + pageData.curPage).querySelector('.' + needScrollClass).scrollTop = 0;
    }
  }
  // 执行翻页页面内部可滚动
  if (needScrollClass) {
    const scrollEleData = {
      canTouch: true,
      startY: 0,
      endY: 0,
      diff: 0,
    }
    element.querySelectorAll('.' + needScrollClass).forEach(function (item, index) {
      item.addEventListener("touchstart", scrollEleTouchStart, false);
      item.addEventListener("touchmove", scrollEleTouchMove, false);
      item.addEventListener("touchend", scrollEleTouchEnd, false);
      function scrollEleTouchStart (e) {
        element.removeEventListener("touchmove", touchMove, false);
        scrollEleData.startY = e.touches[0].pageY;
        scrollEleData.endY = '';
        scrollEleData.diff = '';
      }
      function scrollEleTouchMove (e) {
        scrollEleData.endY = e.touches[0].pageY;
        scrollEleData.diff = scrollEleData.endY - scrollEleData.startY;
      }
      function scrollEleTouchEnd (e) {
        element.addEventListener("touchmove", touchMove, false);
        // console.log(scrollEleData.canTouch);
        if (Math.abs(scrollEleData.diff) > 150 && scrollEleData.canTouch) {
          changeDoBefore(scrollEleData.diff);
        }
        // setTimeout(function(){
        scrollEleData.startY = '';
        scrollEleData.endY = '';
        scrollEleData.diff = '';
        // },500);
      }
      item.addEventListener("scroll", scrollDo, false);
      function scrollDo (e) {
        if ((e.target.clientHeight + e.target.scrollTop + 2 >= e.target.scrollHeight) || (e.target.scrollTop == 0)) {
          setTimeout(function () {
            scrollEleData.canTouch = true;
          }, 500);
        } else {
          scrollEleData.canTouch = false;
        }
      }
    })
  }
}

/***************************/
// 例：
// 循环执行翻页
setChangePage(document.getElementsByClassName('page_box')[0], 'loop', 'scroll_box');
// 不循环执行翻页
// setChangePage(document.getElementsByClassName('page_box')[0],'','scroll_box');

// <!-- music -->
const mcPlay = document.querySelector('#mc_play');
const audio = mcPlay.querySelector('audio')
function play_music(event){
    if (mcPlay.classList.contains('on')){
      audio.pause();
      mcPlay.classList.remove('on');
      mcPlay.classList.add('stop');
    }else{
      audio.play();
      mcPlay.classList.remove('stop');
      mcPlay.classList.add('on');
    }
    event.stopPropagation(); //阻止冒泡
}

mcPlay.addEventListener('click', play_music)
